<template>
  <div class="search">
    <el-form class="search-form" ref="searchForm" :model="form">
      <el-row>
        <el-col :span="5">
          <el-form-item
            label="型号："
            label-width="100px"
            prop="partNumber"
          >
            <el-input v-model="form.partNumber"  placeholder="请输入型号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label="订单号："
            label-width="100px"
            prop="orderId"
            
          >
            <el-input v-model="form.orderId" placeholder="请输入订单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label="运单号："
            label-width="100px"
            prop="waybill"
          >
            <el-input v-model="form.waybill" placeholder="请输入运单号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请日期：" label-width="100px" prop="date">
            <myDate
              @getSelectData="getCreateDate"
              :createDate="form.date"
            ></myDate>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            class="btn"
            @click="doSearchQuery"
            size="small"
            >查 询</el-button
          >
          <el-button class="btn" @click="doSearchReset" size="small"
            >重 置</el-button
          >
          <el-button type="text" @click="doToggle" ref="searchButton">{{
            isshowbody ? "收起" : "高级搜索"
          }}</el-button>
        </el-col>
      </el-row>
      <el-row v-if="isshowbody">
        <el-col :span="5">
          <el-form-item label="类型：" label-width="100px" prop="type">
            <el-select v-model="form.type" style="width: 100%">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import myDate from "@/components/Date/index";
export default {
  name: "search",
  props: {
    active:{
      type:String,
      default:'',
    },
    rules: {
      type: Object,
      default: () => {},
    },
    ruleform: {
      type: Object,
      default: () => {},
    },
    disabled: {
      default: false,
    },
  },
  components: {
    myDate,
  },
  data() {
    return {
      isshowbody: false,
      isshowhigh: true,
      longScreen: true,
      downHeight: 20,
      tabledownHeight: 20,
      form: {
        partNumber: "",
        orderId: "",
        waybill: "",
        date: [],
        type: 1,
        pageNo: 1,
        pageSize: 10,
      },
      typeList: [
        {
          value: 1,
          label: "全部",
        },
        {
          value: 2,
          label: "退货",
        },
        {
          value: 3,
          label: "换货",
        },
        {
          value: 4,
          label: "补货",
        },
      ],
      tabActive:'0',
    };
  },
  created() {
    // this.tabActive = this.active;
  },
  mounted() {
    this.$nextTick(() => {
      this.handleCalHeight();
      window.addEventListener(
        "resize",
        () => {
          this.handleCalHeight();
        },
        false
      );
    });
  },
  methods: {
    // 计算当展开时下降的高度
    handleCalHeight() {
      if (this.$refs.ruleForm) {
        let nums =
          this.$refs.ruleForm.$el.querySelectorAll(".top .el-form-item").length;
        let itemHeight =
          this.$refs.ruleForm.$children[0].$el.getBoundingClientRect().height +
          12;
        this.isshowhigh = false;
        if (window.innerWidth < 1450) {
          if (nums > 3) {
            this.isshowhigh = true;
          }
          this.downHeight = 40 * Math.ceil(nums / 3) + 20;
          this.tabledownHeight = itemHeight * Math.ceil(nums / 3) - 40;
          this.longScreen = false;
        } else {
          if (nums > 4) {
            this.isshowhigh = true;
          }
          this.downHeight = 50 * Math.ceil(nums / 4) + 20;
          this.tabledownHeight = itemHeight * Math.ceil(nums / 4) - 50;
          this.longScreen = true;
        }
        this.$forceUpdate();
      }
    },
    doToggle() {
      // console.log(this.$refs.searchButton, "this.$refs.searchButton.$el");
      // // 多次点击导致出错防止
      this.$refs.searchButton.$el.style["pointer-events"] = "none";
      setTimeout(() => {
        this.$refs.searchButton.$el.style["pointer-events"] = "auto";
      }, 400);
      let $table = this.$parent.$parent.$parent.$refs.mytable[this.tabActive].$refs.table
        ? this.$parent.$parent.$parent.$refs.mytable[this.tabActive].$refs.table
        : this.$parent.$parent.$parent.$refs.mytable[this.tabActive];
      if (!this.isshowbody) {
        let height =
          window.innerHeight -
          $table.$el.getBoundingClientRect().top -
          110 -
          this.tabledownHeight;
        $table.layout.setHeight(height);
        $table.doLayout();
        // console.log(height,'heightheightheight11111111111111111');
        setTimeout(() => {
          this.isshowbody = !this.isshowbody;
        }, 20);
      } else {
        setTimeout(() => {
          let height =
            window.innerHeight - $table.$el.getBoundingClientRect().top - 80;
          $table.layout.setHeight(height);
          $table.doLayout();
          // console.log(height,'heightheightheight');
        }, 500);
        this.isshowbody = !this.isshowbody;
      }
    },
    getCreateDate(date) {
      this.form.date = date;
    },
    doSearchQuery(){
      this.$emit('doQuery',this.form)
    },
    doSearchReset(){
      this.$emit('doReset',this.form,this.tabActive)
    },
  },
  computed: {
    maxheight() {
      if (this.isshowbody) {
        return { "max-height": this.downHeight + "px!important" };
      } else {
        return {};
      }
    },
  },
  watch:{
    active:{
      handler(val,old){
        this.tabActive = val;
        // console.log(val,'tab');
      },
      immediate:true,
      deep:true,
    }
  }
};
</script>

<style scoped lang="scss">
.search {
  .el-col-4 {
    text-align: right;
  }
  .el-button--text{
    color: #004FEE;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #004FEE;
    border-color: #004FEE;
  }
  .se:empty {
    display: none;
  }
  // 单选按钮
  ::v-deep .el-radio__inner {
    width: 20px;
    height: 20px;
  }
  ::v-deep .el-radio__inner::after {
    width: 9px;
    height: 9px;
  }
  .goupdown {
    max-height: 200px !important;
  }
  .godiv1 {
    opacity: 1;
    max-height: 40px;
    overflow: hidden;
    transition: all 0.4s ease-in-out 0s;
  }
  .godiv2 {
    opacity: 1;
    max-height: 34px;
    overflow: hidden;
    transition: all 0.4s ease-in-out 0s;
  }

  .top,
  .foot {
    // border-top: 1px solid #ebeef5;
  }
  ::v-deep .top .el-form-item {
    width: 24%;
    margin: 5px 0px !important;
  }
  ::v-deep .foot .el-form-item {
    margin: 5px 0px !important;
  }
  .foot:empty {
    border-top: none !important;
  }
  @media screen and (max-width: 1450px) {
    ::v-deep .top .el-form-item {
      width: 33%;
    }
  }
  ::v-deep .el-form-item__error {
    position: absolute;
    left: 90%;
    top: 30%;
    white-space: nowrap;
  }
  ::v-deep .el-form-item__content {
    padding: 0px 0px 0px 10px !important;
    margin-left: 90px !important;
  }
  ::v-deep .el-form-item__label {
    padding: 0 0;
  }
  ::v-deep .el-range-editor {
    padding: 3px 2px 3px 5px !important;
  }
}
</style>
